<template>
  <div class="addSpacePage">
    <div class="form-container">
      <h2 class="page-title">
        {{ route.query?.id ? '编辑空间' : '创建空间' }}
      </h2>
      <!-- 上传空间组件 -->
      <a-form layout="vertical" :model="formData" @finish="handleSubmit">
        <a-form-item label="空间名称" name="spaceName">
          <a-input
            v-model:value="formData.spaceName"
            placeholder="请输入空间名称"
            allow-clear
            class="input-field"
          />
        </a-form-item>
        <a-form-item label="空间级别" name="spaceLevel">
          <a-select
            v-model:value="formData.spaceLevel"
            :options="SPACE_LEVEL_OPTIONS"
            placeholder="请选择空间级别"
            style="min-width: 180px"
            allow-clear
            class="select-field"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            style="width: 100%"
            :loading="loading"
            class="submit-btn"
          >
            {{ route.query?.id ? '编辑' : '创建' }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-card title="空间级别介绍">
      <a-typography-paragraph>
        * 目前仅支持开通普通版，如需升级空间，请联系
        <a href="https://gitee.com/jihui-31" target="_blank">作者</a>。
      </a-typography-paragraph>
      <a-typography-paragraph v-for="spaceLevel in spaceLevelList">
        💎{{ spaceLevel.text }}： 大小 {{ formatSize(spaceLevel.maxSize) }}， 数量
        {{ spaceLevel.maxCount }}
      </a-typography-paragraph>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  addSpaceUsingPost,
  getSpaceUsingPost,
  listSpaceLevelUsingGet, updateSpaceUsingPost
} from '@/apis/SpaceInterface.ts'
import { message } from 'ant-design-vue'
import { SPACE_LEVEL_ENUM, SPACE_LEVEL_OPTIONS } from '@/constants/space.ts'
import { formatSize } from '../utils'

const formData = reactive<API.SpaceAddRequest | API.SpaceUpdateRequest>({
  spaceName: '',
  spaceLevel: SPACE_LEVEL_ENUM.COMMON,
})

const loading = ref(false)
const router = useRouter()
const route = useRoute()

// 提交表单数据
const handleSubmit = async (values: any) => {
  const spaceId = oldSpace.value?.id
  loading.value = true
  let res
  // 更新
  if (spaceId) {
    res = await updateSpaceUsingPost({
      id: spaceId,
      ...formData,
    })
  } else {
    // 创建
    res = await addSpaceUsingPost({
      ...formData,
    })
  }
  if (res.data.code === 0 && res.data.data) {
    message.success('操作成功')
    let path = `/admin/spaceManager`
    router.push({
      path,
    })
  } else {
    message.error('操作失败，' + res.data.message)
  }
  loading.value = false
}


// 获取空间级别
const spaceLevelList = ref<API.SpaceLevel[]>([])
const fetchSpaceLevelList = async () => {
  const res = await listSpaceLevelUsingGet()
  if (res.data.code === 0 && res.data.data) {
    spaceLevelList.value = res.data.data
  } else {
    message.error('加载空间级别失败，' + res.data.message)
  }
}
onMounted(() => {
  fetchSpaceLevelList()
})

// 获取老数据,展示在修改框中
const oldSpace = ref<API.SpaceVO>()
const getOldSpace = async () => {
  // 获取数据
  const id = route.query?.id
  if (id) {
    const res = await getSpaceUsingPost({
      id: id,
    })
    if (res.data.code === 0 && res.data.data) {
      const data = res.data.data
      oldSpace.value = data
      formData.spaceName = data.spaceName
      formData.spaceLevel = data.spaceLevel
    }
  }
}

// 页面加载时，请求老数据
onMounted(() => {
  getOldSpace()
})




</script>

<style scoped>
.addSpacePage {
  max-width: 760px;
  margin: 40px auto;
  padding: 24px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.page-title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
}

.input-field {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.select-field {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.submit-btn {
  border-radius: 8px;
  font-size: 16px;
  padding: 12px;
  font-weight: 600;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 36px; /* 设定按钮高度 */
}

.submit-btn:hover {
  background-color: #1890ff;
}
</style>
